<template>
    <teleport to='body'>
        <div class="topCxtBox" @click="goExchange" v-if="assets.cxtAvailableAmount">
            <img src="/images/j1.png" alt=""/>
            <span>{{assets.cxtAvailableAmount.decimalFourString || '0.0000'}}</span>
            <img src="/images/j3.png" alt=""/>
        </div>
    </teleport>
    <ul class="ader-pmlist">
        <li>
            <visit-bonus-rank 
            keyName='adPlaceTitle'
            :keyValue='showval'
            :keyType="keytxt"
            :maxValue="maxValue1"
            :lists='data1' @onTab="getRkData"/>
        </li>
    </ul>
    <router-link to="/global-ad-space" class="ggstp">
        <img src="/images/ggs.png" alt=""/>
        <div class="tipsbox">
            <h5>Global Advertising Space</h5>
        </div>
    </router-link>
    <div class="ggsczbox" v-if="amonuts.totalBonus">
        <router-link to="/ad/fundManage" class="zctop">
            <p>My Bonus Pool(CXT)</p>
            <h5>{{amonuts.totalBonus.decimalFourString}}</h5>
        </router-link>
        <router-link to="/ad/analysis" class="zcbottom">
            <p>Bonus Payment</p>
            <div class="xsfges">
                <p>Total Bonus Payment(CXT)</p>
                <h5>{{amonuts.totalGrantBonus.decimalFourString}}</h5>
            </div>
            <ul>
                <li>
                    <div class="txt">Today</div>
                    <em>{{amonuts.todayGrantBonus.decimalTwoString}}</em>
                </li>
                <li>
                    <div class="txt">This Week</div>
                    <em>{{amonuts.weekGrantBonus.decimalTwoString}}</em>
                </li>
                <li>
                    <div class="txt">This Month</div>
                    <em>{{amonuts.monthGrantBonus.decimalTwoString}}</em>
                </li>
            </ul>
        </router-link>
    </div>
    <my-dailog v-model:show="showFlag" :styleType="3" :showtopclose="true" height="auto">
        <div class="ggs-tips-box">
            <img class="wh" src="/images/wh.png" alt="">
            <div class="tscon">
                All the reviewers unanimously determine that the advertisement you put on [ad slot name] is a violation, and the system will automatically deduct your ad slot deposit and take the ad offline.
            </div>
            <div class="wgtsbox">
                <my-button text='VIEW'/>
            </div>
        </div>
    </my-dailog>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myButton from '@/components/myButton.vue'
import visitBonusRank from '../components/visitBonusRank.vue'
import { H5CallAPPFuction,toast } from '@/utils/common';
export default {
    components:{
       myButton,
       visitBonusRank
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            showFlag:false,
            userInfo:computed(()=>store.state.base.userInfo),
            data1:[],
            showval:'totalPv',
            keytxt:'Visits',
            amonuts:{},
            assets:{},
            ethChain:{}, // eth链钱包余额信息
            maxValue1:1
        })

        onMounted(()=>{
            // App调用，回传ethChain的余额
            window['walletBalance'] = function (objStr) {
                state.ethChain = JSON.parse(objStr)
            }

            try {
                H5CallAPPFuction('jsLoadComplete')  // 调用app的jsLoadComplete方法,通知app，H5页面加载了
                H5CallAPPFuction('getWalletBalance')  // 调用app的getWalletBalance方法,通知app条用H5的walletBalance方法，获取钱包余额，
            } catch (error) {
                console.log("调用app的jsLoadComplete出错了：不是在app环境中调用")
            }

            getGlobalRank(1)
            getReward()
            getMYAsset()
        })
        const getGlobalRank = (rankType)=>{
            store.dispatch('ad/get_global_rank',{
                limi: 20,
                orderField: "",
                orderType: "",
                page: 1,
                rankType, // 1pv,2uv,3奖金
                walletAddress: state.userInfo.walletAddress
            }).then(res=>{
                state.data1 = res.data || []
                if(res.data && res.data.length>0){
                    if(state.showval == 'totalPv'){
                        state.maxValue1 = res.data[0].totalPv
                    }else if(state.showval=='totalCxt'){
                        state.maxValue1 = res.data[0].totalCxt.num
                    }
                }
            })
        }
        const getReward = ()=>{
            store.dispatch('ad/get_adser_je',{
                walletAddress: state.userInfo.walletAddress
            }).then(res=>{
                state.amonuts = res.data || {}
            })
        }
        const getRkData = (index)=>{
            if(index==1){
                state.keytxt='Visits'
                state.showval = 'totalPv'
            }else{
                state.keytxt='Reward(CXT)'
                state.showval = 'totalCxt'
            }
            getGlobalRank(index)
        }
        const getMYAsset=()=>{ // 我的资产
            store.dispatch('capital/get_ctg_income',{
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                state.assets = res.data
            })
        }
        const goExchange = ()=>{
            try {
                H5CallAPPFuction('gotoExchange') 
            } catch (error) {
                toast('无法打开app界面')
            }
        }

        return{
            ...toRefs(state),
            getRkData,
            getReward,
            goExchange
        }
    }
}
</script>

<style lang="scss" scoped>
    .ader-pmlist{
        flex: 1;
        flex-shrink: 0;
        min-width: 450px;
        background: url(/images/flowRanking/pmitbg.png) left top no-repeat;
        background-size: 100% 100%;
        padding: 0 0 20px 0;
        li{
            width: 100%;
            height: 100%;
            padding:15px 10px 10px 10px;
        }
    }
    .ggstp{
        display: block;
        position: relative;
        z-index: 10;
        background: none;
        flex: auto;
        margin: 0 25px;
        padding: 0;
        img{
            float: left;
            display: block;
            max-width: 390px;
            height: 100%;
        }
        .tipsbox{
            position: absolute;
            z-index: 10;
            width: 100%;
            left: 0;
            bottom:10px;
            height: 90px;
            padding: 0 10px;
            h5{
                height: 90px;
                line-height: 90px;
                font-family: Inter-Semi Bold, Inter;
                font-weight: normal;
                color: #FFFFFF;
                font-size: 24px;
                text-align: center;
                background: url(/images/ggs2.png) left top no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    .ggsczbox{
        display: flex;
        flex-flow: column;
        flex: 1;
        min-width: 400px;
        flex-shrink: 0;
        .zctop{
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 200px;
            background: url(/images/ggs3.png) left top no-repeat;
            background-size: 100% 100%;
            line-height: normal;
            font-family: Inter-Semi Bold, Inter;
            font-weight: normal;
            color: #FFFFFF;
            p{
                font-size: 20px;
                color: rgba(255,255,255,0.5);
            }
            h5{
                font-weight: normal;
                font-size: 24px;
                padding: 10px 0 0 0;
            }
        }
        .zcbottom{
            // display: flex;
            // flex-flow: column;
            display: block;
            flex: 1;
            width: 100%;
            margin: 25px 0 0 0;
            background: url(/images/ggs4.png) left top no-repeat;
            background-size: 100% 100%;
            line-height: normal;
            font-family: Inter-Semi Bold, Inter;
            font-weight: normal;
            color: #FFFFFF;
            padding:30px 20px 20px 20px;
            p{
               font-size: 20px;
                color: rgba(255,255,255,0.5); 
                text-align: center;
            }
            h5{
                font-weight: normal;
                font-size: 24px;
                padding: 0;
            }
            .xsfges{
                display: flex;
                flex-flow: column;
                align-items: center;
                justify-content: center;
                background: #00317A;
                height: 150px;
                margin: 20px 0 0 0;
                line-height: 46px;
            }
            ul{
                display: flex;
                flex: 1;
                height: 130px;
                margin: 20px 0 0 0;
                li{
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                    background: rgba(0,49,122,0.5);
                    font-family: Inter-Medium, Inter;
                    font-weight: 500;
                    color: rgba(255,255,255,0.5);
                    line-height: 42px;
                    &+li{
                        margin-left: 10px;
                    }
                    .txt{
                        font-size: 20px;
                    }
                    em{
                        font-style: normal;
                        font-size: 24px;
                        color: #fff;
                    }
                }
            }
        }
    }
    .ggs-tips-box{
        .wh{
            display: block;
            width: 100px;
            margin: 0 auto;
            margin-top: 80px;
        }
        .tscon{
            font-size: 30px;
            font-family: Poppins-SemiBold, Poppins;
            font-weight: 600;
            color: #DFFCFF;
            line-height: 50px;
            text-shadow: 0px 0px 6px #07A3FB;
            background-clip: text;
            -webkit-background-clip: text;
            //-webkit-text-fill-color: transparent;
            padding: 30px 20px;
        }
        .wgtsbox{
            width: 200px;
            margin: 10px auto 30px auto;
        }
    }
    .topCxtBox{
        display: flex;
        position: fixed;
        left:50%;
        top: 0;
        min-width: 200px;
        height: 64px;
        //background: #07A3FB;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        z-index: 1000;
        img{
            display: block;
            height: 100%;
        }
        span{
            flex: 1;
            line-height: 64px;
            background: url(/images/j2.png) left top repeat-x;
            background-size:auto 100% ;
            padding: 0 10px;
            color: #eb6a32;
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            font-size: 30px;
        }
    }
</style>